<template>
  <div class="pay-list">
    <div class="title">一卡通充值</div>
    <div class="one-card">
      <div @click="cardClick('/payCard')">
        <van-icon size="7.6vw" name="coupon-o" />
        <span>一卡通充值</span>
      </div>
    </div>
    <div class="title">缴费</div>
    <div class="pay">
      <div @click="cardClick('/payTuition')">
        <van-icon size="7.6vw" name="label-o" />
        <span>学费</span>
      </div>
      <div @click="cardClick('/payRoom')">
        <van-icon size="7.6vw" name="bill-o" />
        <span>住宿费</span>
      </div>
      <div @click="cardClick('/payBookFee')">
        <van-icon size="7.6vw" name="bill-o" />
        <span>书本费</span>
      </div>
      <div @click="cardClick('/payHydropower')">
        <van-icon size="7.6vw" name="bill-o" />
        <span>水电缴费</span>
      </div>
    </div>
    <div class="title">缴费详情</div>
    <div class="pay-info">
      <div @click="cardClick('/payInfo')">
        <van-icon size="7.6vw" name="notes-o" />
        <span>缴费信息</span>
      </div>
    </div>
  </div>
</template>

<script lang="js">
import {defineComponent, reactive, ref} from 'vue'
import { useRouter } from 'vue-router'
export default defineComponent({
  props: {

  },
  components: {

  },
  setup() {
    const router = useRouter();

    const cardClick=(type)=>{
      router.push(type)
    }

    return {
        cardClick
    }

  }
})
</script>

<style scoped lang="less">
.pay-list {
  padding: 6vw;
  .title {
    font-size: 4.8vw;
    color: rgb(116, 192, 251);
    font-weight: 550;
    margin: 3vh 0;
  }
  .one-card,
  .pay,
  .pay-info {
    padding-left: 6vw;
    display: flex;
    flex-wrap: wrap;
    div {
      display: flex;
      align-items: center;
      flex: 50%;
      margin: 3vh 0;
      i {
        color: rgb(116, 192, 251);
      }
      span {
        margin-left: 2vw;
      }
    }
  }
}
</style>
